<template>
	<cl-page>
		<view class="flash-sale-page">
			<!-- 自定义顶部栏 -->
			<view class="custom-header">
				<cl-status-bar />
				<view class="header-content">
					<text class="header-title">限时抢购</text>
					<view class="header-action">
						<cl-icon name="clock" color="#ffffff" size="20" />
						<text class="action-text">抢购中</text>
					</view>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="content-area">
				<!-- 倒计时横幅 -->
				<view class="countdown-banner">
					<view class="banner-content">
						<view class="countdown-info">
							<text class="countdown-label">距离结束还剩</text>
							<view class="countdown-timer">
								<view class="time-block">
									<text class="time-value">{{ countdown.hours }}</text>
									<text class="time-label">时</text>
								</view>
								<text class="time-separator">:</text>
								<view class="time-block">
									<text class="time-value">{{ countdown.minutes }}</text>
									<text class="time-label">分</text>
								</view>
								<text class="time-separator">:</text>
								<view class="time-block">
									<text class="time-value">{{ countdown.seconds }}</text>
									<text class="time-label">秒</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 商品列表 -->
				<view class="flash-sale-list">
					<view class="list-container">
						<view
							v-for="item in flashSaleItems"
							:key="item.id"
							class="flash-item"
							@tap="toDetail(item)"
						>
							<view class="item-image">
								<cl-image :src="item.image" :size="200" radius="12" />
								<view class="discount-badge">
									<text class="discount-text">{{ item.discount }}折</text>
								</view>
							</view>
							<view class="item-info">
								<text class="item-title">{{ item.title }}</text>
								<view class="price-info">
									<text class="current-price">¥{{ item.currentPrice }}</text>
									<text class="original-price">¥{{ item.originalPrice }}</text>
								</view>
								<view class="stock-info">
									<text class="stock-text"
										>已抢{{ item.soldCount }}/{{ item.totalStock }}</text
									>
									<view class="progress-bar">
										<view
											class="progress-fill"
											:style="{
												width:
													(item.soldCount / item.totalStock) * 100 + '%',
											}"
										></view>
									</view>
								</view>
								<cl-button
									type="danger"
									size="small"
									round
									:disabled="item.soldCount >= item.totalStock"
									@tap.stop="buyNow(item)"
								>
									{{ item.soldCount >= item.totalStock ? "已抢完" : "立即抢购" }}
								</cl-button>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="flashSaleItems.length === 0">
					<view class="empty-content">
						<view class="empty-icon">
							<cl-icon name="clock" size="120" color="#e0e0e0" />
						</view>
						<text class="empty-title">暂无抢购活动</text>
						<text class="empty-desc">敬请期待下一场抢购</text>
					</view>
				</view>
			</view>
		</view>

		<tabbar />
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useCool } from "/@/cool";
import { useUi } from "/$/cool-ui";
import Tabbar from "/@/pages/index/components/tabbar.vue";

const { router } = useCool();
const ui = useUi();

// 倒计时数据
const countdown = reactive({
	hours: "00",
	minutes: "00",
	seconds: "00",
});

// 闪购商品列表
const flashSaleItems = ref([
	{
		id: 1,
		title: "限时特价商品1",
		image: "/static/images/combo-banner.jpg",
		currentPrice: "99.00",
		originalPrice: "199.00",
		discount: 5,
		soldCount: 45,
		totalStock: 100,
	},
	{
		id: 2,
		title: "限时特价商品2",
		image: "/static/images/combo-banner.jpg",
		currentPrice: "88.00",
		originalPrice: "168.00",
		discount: 5.2,
		soldCount: 78,
		totalStock: 100,
	},
]);

let countdownTimer: any = null;

// 开始倒计时
function startCountdown() {
	const endTime = new Date().getTime() + 2 * 60 * 60 * 1000; // 2小时后结束

	countdownTimer = setInterval(() => {
		const now = new Date().getTime();
		const distance = endTime - now;

		if (distance < 0) {
			clearInterval(countdownTimer!);
			countdown.hours = "00";
			countdown.minutes = "00";
			countdown.seconds = "00";
			return;
		}

		const hours = Math.floor(distance / (1000 * 60 * 60));
		const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		const seconds = Math.floor((distance % (1000 * 60)) / 1000);

		countdown.hours = hours.toString().padStart(2, "0");
		countdown.minutes = minutes.toString().padStart(2, "0");
		countdown.seconds = seconds.toString().padStart(2, "0");
	}, 1000);
}

// 跳转到商品详情
function toDetail(item: any) {
	router.push({
		path: "/pages/goods/detail",
		query: {
			id: item.id,
		},
	});
}

// 立即抢购
function buyNow(item: any) {
	if (item.soldCount >= item.totalStock) {
		ui.showToast("商品已抢完");
		return;
	}

	ui.showConfirm({
		title: "确认抢购",
		message: `确定要抢购 ${item.title} 吗？`,
		callback(action) {
			if (action === "confirm") {
				// 这里可以调用抢购接口
				ui.showToast("抢购成功！");
				item.soldCount++;
			}
		},
	});
}

onMounted(() => {
	startCountdown();
});

onUnmounted(() => {
	if (countdownTimer) {
		clearInterval(countdownTimer);
	}
});
</script>

<style lang="scss" scoped>
.flash-sale-page {
	min-height: 100vh;
	background-color: #f7f8fa;
	display: flex;
	flex-direction: column;
}

// 自定义头部
.custom-header {
	background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
	padding-bottom: 20rpx;

	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 32rpx;

		.header-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
		}

		.header-action {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.action-text {
				color: #ffffff;
				font-size: 26rpx;
			}
		}
	}
}

// 内容区域
.content-area {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 120rpx;
}

// 倒计时横幅
.countdown-banner {
	margin: 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16rpx;
	padding: 24rpx;

	.banner-content {
		.countdown-info {
			text-align: center;

			.countdown-label {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 16rpx;
				display: block;
			}

			.countdown-timer {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8rpx;

				.time-block {
					background: rgba(255, 255, 255, 0.2);
					padding: 12rpx 16rpx;
					border-radius: 8rpx;
					text-align: center;
					min-width: 60rpx;

					.time-value {
						font-size: 32rpx;
						color: #ffffff;
						font-weight: 600;
						display: block;
					}

					.time-label {
						font-size: 20rpx;
						color: rgba(255, 255, 255, 0.8);
						display: block;
						margin-top: 4rpx;
					}
				}

				.time-separator {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: 600;
				}
			}
		}
	}
}

// 闪购商品列表
.flash-sale-list {
	padding: 0 20rpx;

	.list-container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.flash-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		display: flex;
		gap: 20rpx;

		.item-image {
			position: relative;
			flex-shrink: 0;

			.discount-badge {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				background: #ff4757;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;

				.discount-text {
					font-size: 20rpx;
					color: #ffffff;
					font-weight: 600;
				}
			}
		}

		.item-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 12rpx;

			.item-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				line-height: 1.4;
			}

			.price-info {
				display: flex;
				align-items: baseline;
				gap: 12rpx;

				.current-price {
					font-size: 32rpx;
					color: #ff4757;
					font-weight: 600;
				}

				.original-price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.stock-info {
				.stock-text {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
					display: block;
				}

				.progress-bar {
					height: 8rpx;
					background: #f0f0f0;
					border-radius: 4rpx;
					overflow: hidden;

					.progress-fill {
						height: 100%;
						background: linear-gradient(90deg, #ff6b6b 0%, #ffa502 100%);
						transition: width 0.3s ease;
					}
				}
			}
		}
	}
}

// 空状态
.empty-state {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;

	.empty-content {
		text-align: center;

		.empty-icon {
			margin-bottom: 40rpx;
		}

		.empty-title {
			font-size: 32rpx;
			color: #1a1a1a;
			font-weight: 500;
			margin-bottom: 16rpx;
			display: block;
		}

		.empty-desc {
			font-size: 26rpx;
			color: #999;
			display: block;
		}
	}
}
</style>
